<div class="bpm-work">
  <div class="bpm-work-left-ex">
    <ul nz-menu [nzMode]="'inline'" style="height: 100%;">
      <li nz-menu-item (click)="menu.setTab('main')" [nzSelected]="true"><i nz-icon type="form"></i>申请表单</li>
      <li nz-menu-item (click)="loadHistory()"><i nz-icon type="ordered-list"></i>办理过程</li>
      <li *ngIf="bs.info.type!=='3'" nz-menu-item (click)="loadImage()"><i nz-icon type="sort-ascending"></i>流程图</li>
    </ul>
  </div>
  <div class="bpm-work-right-ex">
    <div class="bpm-work-right-ex-content">
      <div class="bpm-tabs" *ngIf="menu.curItem=='main'">
        <h2 class="bpm-tabs-title">
          安保人员审批
        </h2>
        <div class="bpm-tabs-sub">
          <div class="bpm-tabs-sub-ioc"></div>
          <div class="bpm-tabs-sub-h2">基本信息</div>
        </div>
        <table>
          <tr>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">姓名</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="name.invalid?'error':'success'" nzHasFeedback>
                <input nz-input [disabled]="!bs.info.first" [(ngModel)]="bs.data.name" name="name" required #name="ngModel" />
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">生日</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="birthday.invalid?'error':'success'"
                nzHasFeedback>
                <nz-date-picker [disabled]="!bs.info.first" [(ngModel)]="bs.data.birthday" name="birthday" required #birthday="ngModel">
                </nz-date-picker>
              </nz-form-control>
            </td>
          </tr>
          <tr>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">参加工作时间</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="enterTime.invalid?'error':'success'"
                nzHasFeedback>
                <nz-date-picker [disabled]="!bs.info.first" [(ngModel)]="bs.data.enterTime" name="enterTime" required #enterTime="ngModel">
                </nz-date-picker>
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">性别</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="gender.invalid?'error':'success'" nzHasFeedback>
                <nz-select class="fm-input" [disabled]="!bs.info.first" [(ngModel)]="bs.data.gender" name="gender" required #gender="ngModel">
                  <nz-option *ngFor="let option of genderDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="genderDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
          </tr>
          <tr>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">身份证</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="idCard.invalid?'error':'success'" nzHasFeedback>
                <input nz-input [disabled]="!bs.info.first" [(ngModel)]="bs.data.idCard" name="idCard" required #idCard="ngModel" />
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">单位</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="unit.invalid?'error':'success'" nzHasFeedback>
                <nz-select class="fm-input" [disabled]="bs.data.unit" [(ngModel)]="bs.data.unit" name="unit" required #unit="ngModel">
                  <nz-option *ngFor="let option of airportDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="airportDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
          </tr>
          <tr>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">部门</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="department.invalid?'error':'success'"
                nzHasFeedback>
                <nz-select class="fm-input" [disabled]="!bs.info.first" [(ngModel)]="bs.data.department" name="department" required
                  #department="ngModel">
                  <nz-option *ngFor="let option of departmentDic.datas" [nzLabel]="option.display"
                    [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="departmentDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">工种</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="workType.invalid?'error':'success'"
                               nzHasFeedback>
                <nz-select class="fm-input" [disabled]="!bs.info.first" [(ngModel)]="bs.data.workType" name="workType" required #workType="ngModel">
                  <nz-option *ngFor="let option of workTypeDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="workTypeDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
          </tr>
          <tr>

            <td class="form-text">
              <nz-form-label nzRequired class="form-label">职业资质情况</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="qualification.invalid?'error':'success'"
                nzHasFeedback>
                <nz-select class="fm-input" [disabled]="!bs.info.first" [(ngModel)]="bs.data.qualification" name="qualification" required
                  #qualification="ngModel">
                  <nz-option *ngFor="let option of qualificationDic.datas" [nzLabel]="option.display"
                    [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="qualificationDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">获取资质时间</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="qualificationTime.invalid?'error':'success'"
                               nzHasFeedback>
                <nz-date-picker [disabled]="!bs.info.first" [(ngModel)]="bs.data.qualificationTime" name="qualificationTime" required
                                #qualificationTime="ngModel"></nz-date-picker>
              </nz-form-control>
            </td>
          </tr>
          <tr>

            <td class="form-text">
              <nz-form-label nzRequired class="form-label">资质复训时间</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="reQualificationTime.invalid?'error':'success'"
                nzHasFeedback>
                <nz-date-picker [disabled]="!bs.info.first" [(ngModel)]="bs.data.reQualificationTime" name="reQualificationTime" required
                  #reQualificationTime="ngModel"></nz-date-picker>
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">资质复训结论</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="reQualificationResult.invalid?'error':'success'"
                               nzHasFeedback>
                <nz-select class="fm-input" [disabled]="!bs.info.first" [(ngModel)]="bs.data.reQualificationResult" name="reQualificationResult"
                           required #reQualificationResult="ngModel">
                  <nz-option *ngFor="let option of reQualificationResultDic.datas" [nzLabel]="option.display"
                             [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="reQualificationResultDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </td>
          </tr>
        </table>
        <div class="bpm-tabs-sub">
          <div class="bpm-tabs-sub-ioc"></div>
          <div class="bpm-tabs-sub-h2">审批信息</div>
        </div>
        <!-- 复杂意见 -->
        <app-bpm-opinion [bpmServer]="bs"></app-bpm-opinion>
      </div>

      <div class="bpm-tabs" *ngIf="menu.curItem=='history'">
        <h2 class="bpm-tabs-title">
          办理过程
        </h2>
        <app-bpm-process [bpmServer]="bs"></app-bpm-process>
      </div>
      <div class="bpm-tabs" *ngIf="menu.curItem=='image'">
        <h2 class="bpm-tabs-title">
          流程图
        </h2>
        <app-bpm-image [bpmServer]="bs"></app-bpm-image>
      </div>
    </div>
  </div>

  <!-- 工具栏 -->
  <app-bpm-tool *ngIf="ss.mi.sa || ss.mi.abryxg" [bpmServer]="bs"></app-bpm-tool>

  <!-- bs.isLoding -->
  <div class="content-loading" *ngIf="bs.isLoading || bs.isSaveing">
    <nz-spin [nzSize]="'large'"></nz-spin>
  </div>
</div>
